﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换脸-zly</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="css/upload-img.css">
</head>
<body>

<div id="app" class="container" v-cloak>
    <div class="uploading-data" v-if="isUploading"></div>
    <div class="upload-img-column">
        <h4>使用说明:</h4>
        <span style="color: blue">换脸功能会以先选择的图片为基础,将后一张图片的脸换到基础图片上</span>
        <h4>须知:</h4>
        <span style="color: red">须知:两张图片必须要有脸,切勿挑战系统稳定性;仅供娱乐切勿当真</span>
        <div class="words">上传图片 ({{imgTempList.length}}/2)</div>
        <div class="upload-wrap">
            <div class="box" v-if="imgTempList.length < 2">
                <label class="p dotted">
                    <input type="file" accept="image/jpg,image/jpeg,image/png" name="file"
                           @change="onChooseImage($event)">
                    <img src="./img/jiahao.png" alt="">
                </label>
            </div>
            <template v-for="(imgItem, imgIndex) in imgTempList">
                <div class="box">
                    <div class="p">
                        <img :src="imgItem">
                        <div class="delete" @click.stop="deleteImg(imgIndex)">
                            <img src="./img/guanbi.png" alt="">
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
    <button class="l-btn" @click="onUploadImg">换脸</button>
    <span style="color: red" v-show="logShow">服务器不咋好,请稍等片刻...</span>
    <div class="words" v-show="show">结果展示:</div>
    <h6 v-show="show">手机端可长按保存图片到本地,PC端可右键保存</h6>
    <img id="img1" width="200px" height="200px" src="" v-show="show">
    <div style="width: 100%;background: #fff;">
        <div style="max-width: 760px;
    min-width: auto;
    padding: 16px 0 14px;
    -webkit-box-shadow: none;
    box-shadow: none;">
            <h4>提别鸣谢:</h4>
            <ul style="display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; color: #999999">
                <li style="margin-right: 10px">
                    <a href="https://cloud.baidu.com/" target="_blank">百度云</a>
                </li>
                <li style="margin-right: 10px">
                    <a href="https://cloud.tencent.com/" target="_blank">腾讯云</a>
                </li>
                <li style="margin-right: 10px">
                    <a href="https://my.vultr.com/" target="_blank">vultr</a>
                </li>
                <li style="margin-right: 10px">
                    <a href="#" target="_blank">戴维</a>
                </li>
            </ul>
            <span>vultr国外服务器不需要 公安备案号
中国互联网举报中心
Chrome商店下载
版权与免责声明
版权申诉
出版物许可证
营业执照
end
            </span>
        </div>
    </div>

    <!--  压缩图片用的  -->
    <canvas id="compressCanvas" style="position: fixed; z-index: -1; opacity: 0; top: -100%; left: -100%"></canvas>
</div>

<script src="js/vue.min.js"></script>
<script src="http://cdn.suoluomei.com/common/js2.0/axios/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            logShow:false,
            show:false,
            imgTempList: [], //图片临时路径列表
            isUploading: false, //是否正在上传
            successPath: [], //上传成功后的路径(没必要)
        },
        mounted: function () {
            var that = this;
        },
        watch: {},
        methods: {
            onChooseImage: function (event) {
                var that = this;
                var currentImgTempArray = that.imgTempList;
                if (currentImgTempArray.length >= 2) {
                    alert("最多上传2张图片");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(event.target.files[0]);
                reader.onload = function () {
                    var replaceSrc = reader.result;
                    var image = new Image();
                    image.src = replaceSrc;
                    image.onload = function () {
                        var width = image.width;
                        var height = image.height;
                        if (width > 1024) {
                            width = 1024;
                            height = Math.ceil(1024 * (image.height / image.width));
                        }
                        var canvas = document.getElementById("compressCanvas");
                        var context = canvas.getContext("2d");
                        canvas.width = width;
                        canvas.height = height;
                        context.beginPath();
                        context.fillStyle = "#ffffff";
                        context.fillRect(0, 0, width, height);
                        context.fill();
                        context.closePath();
                        context.drawImage(image, 0, 0, width, height);
                        replaceSrc = canvas.toDataURL("image/jpeg"); //canvas转DataURL(base64格式)

                        //将压缩后的路径 追加到临时路径数组中
                        var totalList = [];
                        if (currentImgTempArray.length > 0) {
                            totalList = currentImgTempArray.concat(replaceSrc);
                        } else {
                            totalList[0] = replaceSrc;
                        }
                        that.imgTempList = totalList;
                    };
                };
            },
            deleteImg: function (idx) {
                var that = this;
                that.imgTempList.splice(idx, 1);
            },
            onUploadImg: function () {
                var that = this;
                that.logShow = true;
                var imgTempList = that.imgTempList;
                if (imgTempList.length === 2) {
                    that.isUploading = true;
                    let file1 = that.dataURLtoFile(imgTempList[0], 'pj' + Date.now() + '.jpg');
                    let file2 = that.dataURLtoFile(imgTempList[1], 'pj' + Date.now() + '.jpg');
                    let formData = new FormData();
                    formData.append("file1", file1);
                    formData.append("file2", file2);
                    //用axios上传，
                    axios({
                        method: "POST",
                        url: "http://167.179.103.34:8088/faceMerge",
                        data: formData,
                        responseType: "blob",
                        headers: {
                            "Content-Type": "multipart/form-data"
                        }
                    }).then(function (res) {
                        that.show = true;
                        that.logShow = false;
                        document.getElementById("img1").src = window.URL.createObjectURL(res.data);
                        if (confirm("是否需要直接保存图片?")) {
                            that.handleExport(res.data);
                        }
                        that.isUploading = false;
                    }).catch(function (error) {
                        console.error(error);
                        that.isUploading = false;
                        that.logShow = false;
                        alert("出错了!!!!")
                    });
                } else {
                    that.logShow = false;
                    alert("必须上传2张图片")
                }
            },
            /* 下载文件的公共方法，参数就传blob文件流*/
            handleExport(data) {
                // 动态创建iframe下载文件
                let fileName = "pj" + Date.now() + ".jpg";
                if (!data) {
                    return;
                }
                let blob = new Blob([data], {type: "application/octet-stream"});
                if ("download" in document.createElement("a")) {
                    // 不是IE浏览器
                    let url = window.URL.createObjectURL(blob);
                    let link = document.createElement("a");
                    link.style.display = "none";
                    link.href = url;
                    link.setAttribute("download", fileName);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link); // 下载完成移除元素
                    window.URL.revokeObjectURL(url); // 释放掉blob对象
                } else {
                    // IE 10+
                    window.navigator.msSaveBlob(blob, fileName);
                }
            },
            /**
             * 将base64转换为文件
             * @dataUrl base64路径地址
             * @fileName 自定义文件名字
             * */
            dataURLtoFile: function (dataUrl, fileName) {
                var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], fileName, {type: mime});
            },
        }
    });
</script>

<div style="text-align:center;">

</div>
</body>
</html>
